<template>
  <div>
    <h2>{{ msg }}</h2>
    <hr>
    <!-- 这里的count可以通过computed属性，用三种方法取值 -->
    <!-- <h3>{{ count }}</h3> -->
    <h3>{{ $store.state.a.count }}</h3>
    <!-- commit的第一个参数是mutations的函数名，候命是mutations函数里的参数，其state参数可以认为是默认的 -->
    <button @click="add(5)">add</button>
    <button @click="substract(6)">substract</button>
    <hr>
    <button @click="addAction">addAction</button>
    <button @click="substractAction">substractAction</button>
  </div>
</template>

<script>
// mapState映射数据， mapMutations映射方法
import { mapState, mapMutations, mapGetters, mapActions } from 'vuex';
// 引入状态管理库
  import store from '../vuex/store';
  
  export default {
    data() {
      return {
        msg: 'hello vuex',
      }
    },
    // 方法1: 通过传统的方法取值
    // computed: {
    //   count() {
    //     return this.$store.state.count; // 这里要通过this去取
    //   }
    // },
    // 方法2: mapState里面放的对象，里面通过传入一个state进行取值
    // computed: mapState({
    //   count: state => state.count,
    // }),
    // 方法3:最简单的，mapState里面放的是数组，数组的元素是要取的字段的值
    computed: {
      count() {
        return this.$store.state.a.count;
      }
      // ...mapState(['count']),
      // getters的方法1:
      // count() {
      //   return this.$store.getters.count;
      // },
      // getters的方法2:简写
      // ...mapGetters(['count']),
    }, // 通过computed属性取到store的状态值
    methods: {
      ...mapMutations(['add', 'substract']),
      ...mapActions(['addAction', 'substractAction'])
    },
    // 引入状态管理库
    store,
  }
</script>